<template>
  <div class="w-100">
       <div class="row center_nav container">
        <div class="col-xs-4 navleft"><img @click="$router.go(-1)" src="../../static/images/icon_left_return.png" /></div>
        <div class="col-xs-8">绑定手机号</div>
      </div>
      <div class="main pb44">
        <div class="box-line bd-t10 pt10">
           <div class="box-content">
            <span class="box-text">姓名：</span>
            <div class="box-input"><input type="phone" placeholder="请输入您的姓名"></div>
           </div>
         </div>
         <div class="box-line pt10">
           <div class="box-content">
            <span class="box-text">手机号：</span>
            <div class="box-input"><input type="phone" placeholder="请输入手机号码"></div>
            <button class="box-button">验证码</button>
           </div>
         </div>
         <div class="box-line pt10">
           <div class="box-content">
            <span class="box-text">验证码：</span>
            <div class="box-input pr0"><input type="text" placeholder="请输入验证码"></div>
           </div>
         </div>       
        <div class="box-line pt20">
          <button class="button-submit">提交</button>
        </div>        
      </div>
      <div class="copyright">当前版本V1.1.0</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{

  },
}
</script>
<style scoped>
.container{
    background-color: #fff;
    padding: 0px 3vw;
  }
  .navleft{
    padding:0px;
  }
  .navleft img{
    width: 6.8vw;
  }
.center_nav{
  /*height: 7.5vh;*/
  line-height:  7.5vh;
  background-color: #fff;
  color: #333333;
  font-size: 18px;
} 
.main{ width: 100%;}
.box-line{ padding: 0 15px; position: relative}
.bd-t10{border-top: 10px solid #eee;}
.box-content{ height: 45px; border-bottom: 1px solid #ccc; position: relative; line-height: 44px;}
.box-input{ height: 44px; padding: 0 60px 0 60px;}
.box-input input{ width: 100%; border:none; height: 44px; line-height: 44px;}
.box-text{ position: absolute; display: block; width: 60px; }
.box-button{ position: absolute; display: block; width: 60px; height: 32px; line-height: 32px; top:6px; right: 0; background: #f8f8f8; 
            border: 1px solid #dedede; border-radius: 3px;}
.box-button.active{background: #dfdfdf; color: #818181}

.button-submit{ width: 100%; height: 6.7vh; font-size: 114.5%; border-radius: 5px; background: #faa934; color: #fff; border:none;}
.button-submit.active{ color: rgba(255,255,255,0.65)}
.pb44{ padding-bottom: 54px;}
.copyright{ position: fixed; bottom: 0; height: 44px; line-height: 44px; width: 100%; padding: 0 15px; text-align: center;}
</style>
